<!-- 图片渲染组件 v-for -->
<template>
  <div>
    <main class="page">
      <section class="clean-block about-us">
        <div class="container">
          <div class="block-heading">
            <h2 class="text-info">关于旅游</h2>
            <p>旅游可以让我们走出日常的生活圈子，开阔眼界，丰富人生阅历</p>
          </div>
          <div class="row justify-content-center">
            <div
              class="col-sm-6 col-lg-4"
              v-for="(image, index) in images"
              :key="index"
            >
              <div class="card text-center clean-card">
                <img
                  class="card-img-top w-100 d-block"
                  :src="image.src"
                  :alt="image.alt"
                />
                <div class="card-body info">
                  <h4 class="card-title">途游</h4>
                  <p class="card-text">
                    旅游可以让我们走出日常的生活圈子，开阔眼界，丰富人生阅历
                  </p>
                  <div class="icons">
                    <a href="#"><i class="icon-social-facebook"></i></a
                    ><a href="#"><i class="icon-social-instagram"></i></a
                    ><a href="#"><i class="icon-social-twitter"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- <h2>My Image Gallery</h2>
    <div v-for="(image, index) in images" :key="index">
      <img :src="image.src" :alt="image.alt" />
    </div> -->
  </div>
</template>
  
  <script>
import images from "@/assets/images.json";

export default {
  name: "ImageList",
  data() {
    return {
      images: images.images,
    };
  },
};
</script>
  